<template>
  <transition
    name="animate__animated animate__bounce"
    appear
    enter-active-class="animate__backInDown"
    leave-active-class="animate__zoomOut"
  >
    <el-row>
      <!-- 右侧 -->
      <el-col :span="16" style="padding-right: 10px">
        <!-- 用户模块卡片 -->
        <el-card class="box-card" shadow="always">
          <div class="user">
            <div class="overflowBox">
              <div class="avatarTestBox">
                <div class="avatar">
                  <img
                    src="https://glnf123456.obs.cidc-rp-13.joint.cmecloud.cn/fileUpload/202305041419768.webp"
                  />
                </div>
              </div>
            </div>
            <div class="userinfo">
              <p class="name">
                <router-link to="/" class="admin">Admin</router-link>
              </p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <EchartsTwo />
            <p>
              上次登录的时间: <span>{{ nowTime }}</span>
            </p>
            <p>上次登录的地点: <span>武汉</span></p>
          </div>
        </el-card>

        <!-- 表格模块卡片 -->
        <!-- <el-card shadow="hover"> -->
        <!-- <el-table
            :data="tableData"
            style="width: 100%"
            max-height="305"
            stripe
          >
            <el-table-column
              v-for="(val, key) in tableLadbel"
              :label="val"
              :prop="key"
              :key="key"
            ></el-table-column>
          </el-table> -->
        <!-- </el-card> -->
      </el-col>

      <!-- 左侧 -->
      <el-col :span="8" style="padding-left: 10px">
        <!-- 今日订单模块 -->
        <!-- <div class="num">
          <el-card
            :body-style="{ display: 'flex', padding: 0 }"
            v-for="val in countData"
            :key="val.name"
            shadow="hover"
          >
            <i
              class="icon"
              :class="`el-icon-${val.icon}`"
              :style="{ background: val.color }"
            ></i>
            <div class="detail">
              <p class="price">{{ val.value }}</p>
              <p class="desc">{{ val.name }}</p>
            </div>
          </el-card>
        </div> -->

        <!-- 旋转魔方 -->
        <HLSPlayVue />

        <!-- 皮卡丘 -->
        <Tablepet></Tablepet>

        <!-- 折线图 -->
        <!-- <el-card style="height: 220px" shadow="hover">
          <EchartsOne />
        </el-card> -->

        <!-- 柱状图 -->
        <!-- <div class="graph">
          <el-card shadow="hover" style="height: 208px">
            <EchartsTwo />
        
          </el-card>
          <el-card shadow="hover" style="height: 208px">
            <EchartsThree />
          </el-card>
        </div> -->
      </el-col>
    </el-row>
  </transition>
</template>

<script>
//引入axios二次封装的函数
import { getData } from "../api/index";
import EchartsOne from "@/components/EchartsOne.vue";
import EchartsTwo from "@/components/EchartsTwo.vue";
import EchartsThree from "@/components/EchartsThree.vue";
import Tablepet from "./Tablepet.vue";
import HLSPlayVue from "../components/HLSPlay.vue";

export default {
  name: "Home",
  data() {
    return {
      timer: "",
      nowTime: "",
      tableData: [],
      tableLadbel: {
        name: "品牌",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买数",
      },
      // countData: [
      //   {
      //     name: "今日支付订单",
      //     value: 1234,
      //     icon: "success",
      //     color: "#2ec7c9",
      //   },
      //   {
      //     name: "今日收藏订单",
      //     value: 210,
      //     icon: "star-on",
      //     color: "#ffb980",
      //   },
      //   {
      //     name: "今日未支付订单",
      //     value: 1234,
      //     icon: "s-goods",
      //     color: "#5ab1ef",
      //   },
      //   {
      //     name: "本月支付订单",
      //     value: 1234,
      //     icon: "success",
      //     color: "#2ec7c9",
      //   },
      //   {
      //     name: "本月收藏订单",
      //     value: 210,
      //     icon: "star-on",
      //     color: "#ffb980",
      //   },
      //   {
      //     name: "本月未支付订单",
      //     value: 1234,
      //     icon: "s-goods",
      //     color: "#5ab1ef",
      //   },
      // ],
    };
  },

  methods: {
    getNowDate() {
      let date = new Date();
      let sign2 = ":";
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      let minutes = date.getMinutes(); // 分
      let seconds = date.getSeconds(); //秒

      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      this.nowTime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        sign2 +
        minutes +
        sign2 +
        seconds;
    },
  },

  components: {
    EchartsOne,
    EchartsTwo,
    EchartsThree,
    Tablepet,
    HLSPlayVue,
  },

  //在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  //适合调用API
  created() {
    this.timer = setInterval(this.getNowDate, 1000);
  },

  //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  //适合DOM操作
  mounted() {
    //调用时间日期函数
    this.getNowDate();

    //调用axios二次封装函数
    getData().then(({ data }) => {
      // console.log(data);
      const { tableData } = data.data;
      // console.log(tableData);
      this.tableData = tableData;
    });
  },

  beforeDestroy() {
    //离开当前页面，销毁计时器
    if (this.timer) {
      clearInterval(this.timer);
      console.log("已经清楚定时器");
    }
  },
};
</script>

<style lang="less" scoped>
.box-card {
  margin-bottom: 10px;
  height: 400px;
  .user {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 40px;
    }
    .userinfo {
      .name {
        font-size: 32px;
        margin-bottom: 10px;
        a {
          //去掉下换线
          text-decoration: none;

          //文字颜色更改
          color: black;

          //过渡
          transition: all 0.5s;
        }
        .admin:hover {
          display: block;
          width: 92px;
          height: 50px;
          border-radius: 30px;
          background-color: #8ec6ff;
          font-size: 20px;
          text-align: center;
          line-height: 50px;
        }
      }
      .access {
        color: #999;
      }
    }
  }
}
.login-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999;
    span {
      color: #666;
      margin-left: 60px;
      .number {
        font-size: 12px;
      }
    }
  }
}

.overflowBox {
  display: inline-block;
  border-radius: 1000px;
  transform: translateX(-50%);
  cursor: pointer;
  overflow: hidden;
  transition: 0.4s;
  margin-left: 120px;
  &:hover {
    transform: translateX(-50%) scale(0.8966);
  }

  .avatarTestBox {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background: #edd383;
    transition: 0.4s;

    &:hover {
      .avatar {
        transform: scale(1.34) translateX(-50%);
      }
    }

    .avatar {
      width: 50px;
      height: 100%;
      border-radius: 16px;
      z-index: 2;
      position: absolute;
      bottom: 0%;
      left: 60%;
      transform: translateX(-50%);
      transform-origin: 0 50%;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &::before {
      content: "";
      display: block;
      width: calc(100% - 12px);
      height: calc(100% - 9px);
      border: 6px red solid;
      border-radius: 50%;
      background: none;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

    &::after {
      content: "";
      display: block;
      width: calc(100% - 12px);
      height: 50%;
      border: 6px red solid;
      border-top: none;
      border-radius: 0 0 1000px 1000px;
      position: absolute;
      bottom: -4px;
      left: 0;
      z-index: 9;
    }
  }
}
</style>
